<template>
  <view>
    <!-- 流程查看 -->
    <view class="process" @click="showPop">
      <view class="processTitle">
        <u-image style="display: inline-block;vertical-align: middle;" width="20px" height="20px" src="../../static/img/processLeft.png" />
        <text style="vertical-align: middle;margin-left: 10px;">查看流程图</text>
      </view>
      <view class="processIcon">
        <u-image style="display: inline-block;vertical-align: middle;" width="20px" height="20px" src="../../static/img/right.png" />
      </view>
    </view>

    <!-- 流程日志 -->
    <view :style="{'height':initHeight+'px'}" class="processLog">
      <u-time-line>
        <u-time-line-item v-for="(item,index) in lcContent" :key="index" node-top="2">
          <!-- 此处自定义了左边内容，用一个图标替代 -->
          <template #node>
            <view v-if="item.opinion" class="u-node" style="background: #19be6b;">
              <!-- 此处为uView的icon组件 -->
              <u-icon name="pushpin-fill" color="#fff" :size="24" />
            </view>
            <view v-else class="u-node">
              <!-- 此处为uView的icon组件 -->
              <u-icon name="account" color="#fff" :size="24" />
            </view>
          </template>
          <template #content>
            <view>
              <view class="u-order-title">{{ item.taskName }}</view>
              <view class="itemClass">
                <view class="u-order-desc">
                  <view v-if="item.approveTime" style="font-size: 13px;text-align: right;">
                    <u-icon name="clock" :size="30" />
                    {{ item.approveTime }}
                  </view>
                  <view>
                    <image style="width: 30px;height:30px;border-radius: 50%;vertical-align: middle;" src="../../static/img/user.png">
                      <text style="vertical-align: middle;margin-left: 10px;">
                        <text v-if="item.approverName" class="title">{{ item.approverName }}
                        </text>
                        <text v-else class="title">
                          {{ item.assignInfo }}
                        </text>

                      </text>
                    </image></view>
                  <view style="margin-top: 10px;">
                    审批语:{{ item.opinion }}
                  </view>
                  <view class="fileClass">
                    <view
                      v-for="(item,index) in item.fileList"
                      :key="index"
                      style="display: flex;align-items: center;"
                      @click="showFile(item)"
                    >
                      <view style="flex:1.2;text-align: left;">
                        <image
                          v-if="item.fileType===&quot;doc&quot;|| item.fileType===&quot;docx&quot;"
                          style="width: 40px; height: 40px; "
                          mode="aspectFit"
                          src="../../static/img/word.png"
                        />
                        <image
                          v-else-if="item.fileType===&quot;xls&quot;|| item.fileType===&quot;xlsx&quot;"
                          style="width: 40px; height: 40px; "
                          mode="aspectFit"
                          src="../../static/img/excel.png"
                        />
                        <image v-else style="width: 40px; height: 40px; " mode="aspectFit" src="../../static/img/tp.png" />
                      </view>
                      <view style="flex:4;text-align: left;">
                        <view>{{ item.originName.substring(0,20) }}...</view>
                        <view class="sizeClass"> {{ item.fileSize }}</view>
                      </view>
                      <view style="flex:1;text-align: right;">
                        <image style="width: 20px; height: 20px; " mode="aspectFit" src="../../static/img/more.png" />
                      </view>
                    </view>
                  </view>

                  <view style="margin-top: 10px;font-size: 10px;text-align: right;">
                    操作:
                    <text v-if="item.status===&quot;start&quot;">开始</text>
                    <text v-if="item.status===&quot;agree&quot;">同意</text>
                    <text v-if="item.status===&quot;reject&quot;">退回</text>
                    <text v-if="item.status===&quot;awaiting_check&quot;">待审</text>
                    <text v-if="item.status===&quot;end&quot;">结束</text>
                  </view>
                </view>
                <!-- <view class="u-order-time">2019-05-08 12:12</view> -->
              </view>
            </view>
          </template>
        </u-time-line-item>
      </u-time-line>

    </view>

    <!-- 打开弹窗 -->
    <u-popup v-model="show" :zoom="true" :closeable="true" mode="bottom" border-radius="14" width="100%" height="90%">
      <view class="content">
        <image style=" height: 400px;" mode="aspectFit" :src="imgSrc" />
      </view>
    </u-popup>
    <!--  -->
    <u-mask :show="dialogShow" @click="dialogShow = false">
      <view class="warp">
        <view class="rect" @tap.stop>
          <view style="font-size: 14px;color: #a2a2a2;">
            {{ title }}
          </view>
          <view v-for="(item, index) in importDate" :key="index" class="content-item" @click.stop="select(item,index)">
            <text>
              {{ item.name }}
            </text>
          </view>
          <view class="uni-share-button-box">
            <view style="width: 100%;color: gray;text-align: center;font-size: 15px;height: 40px;line-height: 40px;" @click="close">
              取消
            </view>
          </view>
        </view>
      </view>
    </u-mask>
    <!-- <uni-popup ref="popupShare" type="share" @change="change">
			<uni-popup-share :title="title" @select="select" :importDate='importDate'></uni-popup-share>
		</uni-popup> -->
    <u-toast ref="uToast" />

  </view>
</template>

<script>
import {
  flowImage,
  getInstanceOpinion,
  getFileList
} from '@/api/bpm/bpm.js';
import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue';
export default {
  components: {
    uniPopupShare
  },
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      dialogShow: false,
      show: false,
      imgSrc: '',
      lcContent: [],
      fileList: [],
      initHeight: '',
      title: '',
      importDate: [{
        index: 0,
        name: '打开文件'
      },
      {
        index: 1,
        name: '下载文件'
      }
      ],
      path: ''

    };
  },
  created() {
    setTimeout(() => {
      this.getInstanceOpinion();
    }, 800);
    this.initHeight = document.body.clientHeight - 68;
  },
  methods: {
    close() {
      this.dialogShow = false;
    },
    /**
			 * 选择内容
			 */
    select(e, index) {
      if (e.name === '打开文件') {
        // http://115.239.175.246:5003
        // http://127.0.0.1:8082
        var originUrl = `http://115.239.175.246:5003/project/downLoad?filePath=${this.path}&fileName=${this.title}`; // 要预览文件的访问地址
        console.log(originUrl);
        var previewUrl = originUrl + `&fullfilename=${this.title}`;
        console.log(previewUrl);
        return;
        if (
          window.location.host.includes('115.239') ||
						window.location.host.includes('10.10') || window.location.host.includes('192')
        ) {
          window.open(
            'http://115.239.175.246:5004/onlinePreview?url=' +
							encodeURIComponent(previewUrl)
          );
        } else if (window.location.host.includes('10.32')) {
          window.open(
            'http://10.32.205.10:8081/onlinePreview?url=' +
							encodeURIComponent(previewUrl)
          );
        } else {
          window.open(
            'http://10.40.88.26:8081/onlinePreview?url=' +
							encodeURIComponent(previewUrl)
          );
        }
      } else {
        // 下载
        this.$refs.uToast.show({
          title: '暂不支持下载文件功能',
          type: 'warning',
          position: 'top'
        });
      }

      done();
    },
    change() {

    },
    // 展示文件(下载还是在线预览)
    showFile(item) {
      this.title = item.originName;
      this.path = item.path;
      this.dialogShow = true;
      // this.$refs.popupShare.open()
    },

    // 流程图
    flowImage() {
      flowImage({
        'instId': this.option.instId,
        'defId': this.option.defId,
        'taskId': this.option.taskId
      }).then(res => {
        this.isImg = false;
        var blob = new Blob([res], {
          type: 'imageType'
        }); // 指定格式为图片
        this.imgSrc = window.URL.createObjectURL(blob);
      });
    },
    // 获取上传的文件
    getFileList() {
      getFileList({
        guid: this.option.bizKey,
        status: '',
        type: this.option.fileType
      }).then(res => {
        if (res.success) {
          this.fileList = res.data;
        }
      });
    },
    // 历史审批意见
    getInstanceOpinion() {
      let params = '';
      if (this.option.type === '0') {
        params = {
          instId: this.option.instId
        };
      } else {
        params = {
          instId: this.option.instId,
          taskId: this.option.taskId
        };
      }
      getInstanceOpinion(params).then(res => {
        if (res.code == 200) {
          // eslint-disable-next-line no-empty
          if (res.data.length == 0) {} else {}
          res.data.map(o => {
            if (o.assignInfo) {
              const reg = new RegExp('user-', 'g');
              o.assignInfo = o.assignInfo.replace(reg, '');
            }
          });
          const newData = res.data.filter(item => item.taskName !== '起草节点');
          this.lcContent = newData;
          uni.setStorage({
            key: 'lcContent',
            data: JSON.stringify(newData)
          });

          this.getFileList();
          setTimeout(() => {
            this.lcContent.map((item, index) => {
              item.fileList = [];
              if (item.approverName) {
                this.fileList.map(b => {
                  if (item.approverName.indexOf(b.trueName) !== -1) {
                    item.fileList.push(b);
                  }
                });
              }
            });
            // 强制刷新
            this.$forceUpdate();
          }, 1000);
        } else {
          this.lcContent = [];
        }
        // const data = JSON.stringify(this.lcContent);
        // localStorage.setItem("lcContent", data);
      });
    },

    showPop() {
      this.flowImage();
      setTimeout(() => {
        this.show = true;
      }, 500);
    }
  }

};
</script>

<style scoped lang='scss'>
	.listview {
		height: 100px;
		width: calc(100vw);
	}

	.content-item {
		text-align: center;
		font-size: 15px;
		height: 50px;
		border-bottom: 1px solid #d0c8c8;
		line-height: 50px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3296FA;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 80%;
		margin-left: 5%;
		background-color: #fff;
		position: relative;
		top: -150px;
		padding: 10px;
	}

	.content {

		text-align: center;
	}

	.process {
		width: 100%;
		height: 50px;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding-left: 10px;

		.processTitle {
			flex: 5;
			font-size: 17px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 24px;
		}

		.processIcon {
			flex: 1;
			text-align: right;
			padding-right: 20px;
		}
	}

	.processLog {
		margin-top: 10px;
		background: #fff;
		padding: 20px;

		overflow-y: auto;
	}

	.itemClass {
		/* border: 1px solid #c1b5b5; */
		border-radius: 5px;
		padding: 20px;
		margin-top: 10px;
		background-color: #f6f7f9;
		box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1), 0 0 4px 0 rgba(0, 0, 0, 0.1);
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.title {
		font-size: 13px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;

	}

	.fileClass {
		margin-top: 10px;
	}

	.sizeClass {
		margin-top: 5px;
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 14px;
	}
</style>
